<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 先引入第三方的框架 -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="./css/productlist.css">
</head>

<body>
    <!-- 头部区域 -->
    <header id="header">
        <a href="#" class="logo"><img src="images/header_logo.png" alt=""></a>
        <a href="#" class="app"><img src="images/header_app.png" alt=""></a>
    </header>
    <!-- 搜索区域 -->
    <section id="search">
        <!-- 在两个input外面套一个form表单 一是 语义角度 二是布局的角度 -->
        <form action="#">
            <!-- type=search 当点击搜索框的时候输入法右下角 变成搜索 -->
            <input type="search" name="" id="" placeholder="请输入要比价的商品">
            <input type="submit" value="搜索">
        </form>
    </section>
    <section id="product">
        <div class="product-title">
            <ol class="breadcrumb">
                <li><a href="./">首页</a></li>
                <li><a href="javascript:history.go(-1)">分类大全</a></li>
                <li>电视机</li>
            </ol>
            <a class="btn btn-default" href="">筛选</a>
        </div>
        <div class="product-list">
            <ul>
                <!-- <div class="media">
                    <a class="media-left" href="#">
                        <img src="http://pro.zuyushop.com:8015/ProPic/20166/Thumb/Thumb_2016060015515937123.png" alt="乐视TV(Letv)S50 Air全配版2D 50英寸 全高清LED液晶电视" width="100" height="100">
                    </a>
                    <div class="media-body">
                        <a href="">
                            <h5>乐视TV(Letv)S50 Air全配版2D 50英寸 全高清LED液晶电视</h5>
                            <p class="price">1999</p>
                            <em>报价(6)</em><em>评论(2286)</em>
                        </a>
                    </div>
                </div> -->
            </ul>
        </div>
        </div>
        <div class="product-page clearfix">
            <input type="button" value="上一页" class="btn btn-default pull-left pre">
            <input type="button" value="下一页" class="btn btn-default pull-right next">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
第<span class="curPage">1</span>页
<span class="caret"></span>
</button>
                <ul class="dropdown-menu" id="pageBox" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" href="javascript:;">第1页</a></li>
                    <li role="presentation"><a role="menuitem" href="javascript:;">第2页</a></li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 底部区域 -->
    <footer id="footer">
        <div class="row">
            <div class="col-xs-4">
                <a href="#">登录</a>
            </div>
            <div class="col-xs-4">
                <a href="#">注册</a>
            </div>
            <div class="col-xs-4">
                <a href="#"><img src="images/top.jpg" alt="">返回顶部</a>
            </div>
        </div>
        <p> <a href="#">手机APP下载</a> <a href="#">慢慢买手机版</a> -- 掌上比价平台</p>
        <p>m.manmanbuy.com </p>
    </footer>
    <!-- 模板 -->
    <script type="text/html" id="productList">
        {{each result as value i}}
        <div class="media">
            <a class="media-left" href="#">
               {{#value.productImg}}
            </a>
            <div class="media-body">
                <a href="">
                    <h5>{{value.productName}}</h5>
                    <p class="price">{{value.productPrice}}</p>
                    <em>{{value.productQuote}}</em><em>{{value.productCom}}</em>
                </a>
            </div>
        </div>
        {{/each}}
    </script>
    <!-- 先引入jquery  Bootstrap依赖jquery-->
    <script src="lib/jquery/jquery.js"></script>
    <!-- 后引入Bootstrap的js文件 -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/template-web.js"></script>
    <script src="js/productlist.js"></script>
</body>

</htm